<template>
  <div class="catrgory">  
      <div 
        v-for="(item,index) in cate" 
        :class="{active:index===currentIndex}"
        @click="item_click(index)"
        >
        {{item}}
        
        </div> 
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      cate:[
        '全部','新歌','热歌','收藏'
      ],
      currentIndex:0
    };
  },
  methods: {
    item_click(index){
      this.currentIndex = index
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.catrgory{
  margin: 10px 5px;
  display: flex;
}
.catrgory div{
  flex: 1;
  text-align: center;
}
.active{
  background-color: brown;
  color: #fff;
  border-radius: 10px;
}
</style>
